<template>
 <div>  
      <!--会员中心导航-->
      <div class="row center_nav container">
        <div class="col-xs-4 navleft"><img @click="$router.go(-1)" src="../../static/images/icon_left_return.png" /></div>
        <div class="col-xs-8">会员中心</div>
      </div>
    <!--第一灰色条-->
    <div class="one_gray"></div>
    <!--张三-->
    <div class="bindphone">
      <div class="nameleft">
        <div class="nameleft_img"><img src="../../static/images/icon_cersonalcenter.png" /></div>
        <div class="nameleft_name">张三</div>
        <div>15733333333</div>
      </div>
      <div class="namerigth">
        <router-link to="/login">
          <div class="namerigth_bind">绑定手机号</div>
        </router-link>
      </div>  
    </div>
    <div class="one_gray_else"></div>
    <!--购物订单-->
    <div class="shoporder">
      <router-link to="/shoporder">
        <div class="shopleft">
          <div><img src="../../static/images/icon_shopingorder.png" /></div>
          <div>购物订单</div>
        </div>
        <div class="shoprigth"><img src="../../static/images/icon_right_return.png" /></div>
      </router-link>
    </div>
    <div class="one_gray_else"></div>
    <!--点餐订单-->
     <div class="shoporder">
        <router-link to="/mealorder">
           <div class="shopleft">
           <div><img src="../../static/images/icon_order.png" /></div>
              <div>点餐订单</div>
          </div>
          <div class="shoprigth"><img src="../../static/images/icon_right_return.png" /></div>
        </router-link>
    </div>
    <div class="one_gray_else"></div>
 </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {  
     
    }
  },
}
</script>
<style scoped>
.container{
    background-color: #fff;
    padding: 0px 3vw;
  }
  .navleft{
    padding:0px;
  }
  .navleft img{
    width: 6.8vw;
  }
.center_nav{
  /*height: 7.5vh;*/
  line-height:  7.5vh;
  background-color: #fff;
  color: #333333;
  font-size: 18px;
}
.one_gray{
  height: 10px;
  background-color: #eee;
}
.bindphone{
  /*height: 8.2vh;*/
  padding: 0px 2vw 0px 5vw;
  line-height:  8.2vh;
  font-size: 14px;
}
.bindphone img{
  width: 9.6vw;
}
.one_gray_else{
  height:5px;
  background-color: #eee;
}
.bindphone div{
  display: inline-block;
}
.nameleft{
  width: 68vw;
}
.namerigth{
  width: 22vw;
  text-align: center;
}
.namerigth a{
   background-color: #faab35;
   padding: 1.6vw;
   color: white;
   border-radius: 1.6vw;
}
.nameleft_img{
  margin-right: 1.3%;
}
.nameleft_name{
  margin-right: 2%;
}
.shoporder{
  /*height: 6.1vh;*/
  padding: 0px 2% 0px 5%;
  line-height:6.1vh;
  font-size: 14px;
}
.shopleft{
  width: 68%;
}
.shoprigth{
  width: 25%;
  text-align: right;
}
.shoporder div{
  display: inline-block;
}
 .shoporder .shopleft  img{
   width: 11.7vw;
 }
.shoporder .shoprigth img{
  width: 4.8vw;
  text-align: right;
}
.namerigth_bind{
}
</style>
